<!DOCTYPE html>

<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <title>Chart.js - criando gráficos com a biblioteca Chart.js</title>

    <script src="Chart.min.js"></script>

    <style type="text/css">

    *{
        font-family: calibri;        
    }

    .box {
        margin: 0px auto;
        width: 70%;
    }

    .box-chart {
        width: 100%;
        margin: 0 auto;
        padding: 10px;
    }

    </style>  

    <script type="text/javascript">
        var randomnb = function(){ return Math.round(Math.random()*300)};
    </script>  

</head>

<body>    

    <div class="box">

        <h1>Chart.js - criando gráficos com a biblioteca Chart.js - DEMO</h1>
        <small>Arquivo com testes e demo de funcionalidades da biblioteca Chart.js criado para o tutorial do blog Web Social Dev.</small>        

        <h2>Gráfico Donut</h2>
        <small>Dados gerados com função javascript para números randômicos até 300.</small>

        <div class="box-chart">

            <canvas id="GraficoDonut" style="width:100%;"></canvas>

            <script type="text/javascript">

                var options = {
                    responsive:true                    
                };

                var data = [
                    {
                        value: randomnb(),
                        color:"#F7464A",
                        highlight: "#FF5A5E",
                        label: "Vermelho"
                    },
                    {
                        value: randomnb(),
                        color: "#46BFBD",
                        highlight: "#5AD3D1",
                        label: "Azul"
                    },
                    {
                        value: 15,
                        color: "#FDB45C",
                        highlight: "#FFC870",
                        label: "Amarelo"
                    }
                ]
                
                window.onload = function(){

                    var ctx = document.getElementById("GraficoDonut").getContext("2d");
                    var PizzaChart = new Chart(ctx).Doughnut(data, options);
                }  
            </script>           

        <p><a href="http://websocialdev.com/graficos-chart-js-introducao/">Voltar para o página do tutorial</p>

        </div>
    
    </div>
</body>

</html>